<template>
    <div class="option">
        <div class="sort">
            {{ sort }}
        </div>
        <div v-if="data.type == 'text'">
            <p class="text">{{ data.content }}</p>
        </div>
        <el-image :src="data.content" v-else-if="data.type == 'image'">
        </el-image>
    </div>
</template>
<script setup lang="ts">
import { onMounted, computed } from 'vue'
const props = defineProps({
    content: {
        default: "",
        type: String
    },
    sort: {
        default: "",
        type: String
    }
})

const data = computed(() => {
    return props.content.indexOf('/res') == 0 ?
        {
            type: "image",
            content: props.content
        } : {
            type: "text",
            content: props.content
        }
})
onMounted(() => {
    console.log('mounted!')
})
</script>
<style lang="scss" scoped>
.option {
    display: flex;
}

.sort {
    display: inline-block;
    padding: 0 8px;
    line-height: 32px;
    align-items: flex-start;


}

.el-image {
    width: 240px;
    height: 240px;
    flex-shrink: 0;
    border: 1px solid #eee;
    border-radius: 8px;

}

.text {
    line-height: 32px;
}
</style>